<template>
	<view class="order-container">
		<!-- 导航栏 -->
		<u-navbar
			title="我的订单"
			title-color="#000"
			:title-bold="true"
			:border-bottom="false"
			:background="{ background: '#ffffff' }"
			:back-icon-color="'#000'"
			:is-back="true"
		></u-navbar>

		<!-- 选项卡 -->
		<u-tabs :list="orderTabs" :current="currentTab" @change="changeTab" gutter="50"></u-tabs>

		<!-- 订单列表 -->
		<scroll-view class="order-list" scroll-y @scrolltolower="loadMore" :scroll-top="scrollTop" @scroll="handleScroll">
			<view style="padding: 50rpx 0">
				<view v-for="(order, index) in orders" :key="index">
					<view class="order-card" @click="orderPlUrl(getStatusText(order.orderState), order.id)">
						<!-- 订单头部 -->
						<view class="card-header">
							<view class="order-id">订单编号：{{ order.orderNum }}</view>
							<view class="order-status" :class="`status-${order.orderState}`">
								{{ getStatusText(order.orderState) }}
							</view>
						</view>

						<!-- 订单商品 -->
						<view class="goods-item">
							<image class="goods-image" :src="path + order.axGood.goodImg.split(',')[0]" mode="aspectFill"></image>
							<view class="goods-info">
								<view class="goods-title">{{ order.axGood.goodName }}</view>
								<view class="goods-specs">{{ order.axGood.goodParams }}</view>
								<view class="goods-rating">
									<u-rate :count="5" :value="order.axGood.goodStars" :disabled="true" size="28" active-color="#ff9b00"></u-rate>
								</view>
							</view>
						</view>

						<!-- 促销信息 -->
						<!-- 				<view class="promotion" v-if="order.promotion && order.promotion.length">
											<text v-for="(text, i) in order.promotion" :key="i" class="promo-tag">{{ text }}</text>
										</view> -->

						<!-- 订单详情 -->
						<view class="order-details">
							<view class="quantity">数量：x{{ order.totalNum }}</view>
							<view class="price-section">
								<view class="price-label">合计：</view>
								<view class="price">¥{{ order.totalFee }}</view>
							</view>
						</view>

						<!-- 订单时间 -->
						<view class="order-time">{{ order.createTime }}</view>
					</view>
				</view>

				<!-- 加载更多提示 -->
				<x-loading-more :loadingMore="loadingMore"></x-loading-more>
				<!-- 无订单展示 -->
				<view v-if="orders.length === 0" class="no-products">
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="该分类下暂无商品"></u-empty>
				</view>
			</view>
		</scroll-view>

		<x-back-top ref="backTopRef" @scrollToTop="scrollToTop"></x-back-top>
	</view>
</template>

<script>
import user from '@/api/user';
import api from '@/api/index.js';
export default {
	data() {
		return {
			path: api.getPath(),
			scrollTop: 0, // 滚动位置
			currentTab: 0,
			pageNum: 1,
			pageSize: 10,
			total: 0,
			loadingMore: false,
			orderTabs: [{ name: '全部' }, { name: '待发货' }, { name: '待收货' }, { name: '已完成' }],
			orders: []
		};
	},
	onLoad(o) {
		if (o.index) {
			this.changeTab(o.index);
		}
	},
	onShow() {
		this.getMyshoplist();
	},
	methods: {
		// 处理滚动事件
		handleScroll(e) {
			this.$refs.backTopRef?.triggerHandleScroll(e);
		},
		// 滚动到顶部
		scrollToTop(e) {
			this.scrollTop = e; // 重置滚动位置
		},
		// 切换订单标签
		changeTab(index) {
			this.currentTab = index;
			this.getMyshoplist();
		},
		// 加载更多
		loadMore() {
			if (!this.loadingMore) {
				this.loadingMore = true;
				const _this = this;

				if (this.total > this.pageNum * this.pageSize) {
					this.pageNum++;
				} else {
					_this.loadingMore = false;
					return;
				}

				user.getMyshoplist({
					Platform: 'B',
					pageNum: _this.pageNum,
					pageSize: _this.pageSize,
					orderState: _this.currentTab
				}).then((res) => {
					_this.orders = [..._this.orders, ...res.rows];
					_this.total = res.total;
					_this.loadingMore = false;
				});
			}
		},
		// 获取状态文本
		getStatusText(status) {
			const map = {
				1: '待发货',
				2: '待收货',
				3: '已完成'
			};
			return map[status] || '';
		},
		orderPlUrl(row, id) {
			uni.navigateTo({
				url: `/pages/order/particulars?title=${row}&id=${id}`
			});
		},
		getMyshoplist() {
			this.loadingMore = true;
			const _this = this;
			user.getMyshoplist({
				Platform: 'B',
				pageNum: _this.pageNum,
				pageSize: _this.pageSize,
				orderState: _this.currentTab == 0 ? '' : _this.currentTab
			}).then((res) => {
				_this.orders = res.rows;
				_this.total = res.total;
				_this.loadingMore = false;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.order-container {
	background-color: #f5f5f5;
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.order-list {
	flex: 1;
	width: 90vw;
	margin-left: 5vw;
	background-color: #f5f5f5;
	overflow-x: auto;
	box-sizing: border-box;
}

.order-card {
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 30rpx 0;
}

.order-id {
	font-size: 26rpx;
	color: #999;
}

.order-status {
	font-size: 26rpx;
	padding: 8rpx 20rpx;
	border-radius: 30rpx;

	&.status-1 {
		// 待发货
		background-color: #fff8e8;
		color: #ff9b00;
	}

	&.status-2 {
		// 待收货
		background-color: #e8f2ff;
		color: #2880ff;
	}

	&.status-3 {
		// 已完成
		background-color: #e8f7f0;
		color: #0db177;
	}
}

.goods-item {
	display: flex;
	padding: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.goods-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 10rpx;
	flex-shrink: 0;
	background: linear-gradient(135deg, #a8edea, #fed6e3);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;

	&::after {
		content: 'SHINING';
		position: absolute;
		top: 20rpx;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #fff;
	}

	&::before {
		content: 'FINGER TIPS';
		position: absolute;
		bottom: 20rpx;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #fff;
	}
}

.goods-info {
	flex: 1;
	padding-left: 20rpx;
}

.goods-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	line-height: 1.4;
	margin-bottom: 10rpx;
}

.goods-specs {
	font-size: 26rpx;
	color: #999;
	margin-bottom: 15rpx;
}

.promotion {
	padding: 20rpx 30rpx;
	background-color: #fffaf7;
	border-bottom: 1rpx solid #f5f5f5;
}

.promo-tag {
	display: inline-block;
	font-size: 24rpx;
	color: #ff7a40;
	background-color: #ffefe7;
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
	margin-right: 10rpx;
}

.order-details {
	display: flex;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.quantity {
	font-size: 26rpx;
	color: #666;
}

.price-section {
	display: flex;
	align-items: baseline;
}

.price-label {
	font-size: 26rpx;
	color: #666;
	margin-right: 10rpx;
}

.price {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.order-time {
	padding: 20rpx 30rpx;
	font-size: 24rpx;
	color: #999;
	text-align: right;
}
</style>
